<template>
  <div class="found">
    <!-- 标题 -->
    <div class="hot-issue">
      <div class="title">
        <p>热门话题</p>
      </div>

      <!-- 内容轮播 -->
      <div class="content">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          :show-indicators="false"
          width="140"
        >
          <van-swipe-item
            v-for="(item, index) in hotIssueList"
            :key="item.actId"
          >
            <div
              class="temp"
              :style="{ backgroundImage: 'url(' + item.sharePicUrl + ')' }"
            >
              <div class="zzc">
                <div class="text">
                  <p class="van-ellipsis">{{ item.title }}</p>
                </div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>

<script>
import { getHotIssue } from "@/api/found.js";
import { onMounted, ref } from "vue";
export default {
  setup() {
    const hotIssueList = ref([]);
    const getHotIssueData = async () => {
      let { data } = await getHotIssue();
      console.log(data);
      if (data.code == 200) {
        hotIssueList.value = data.hot;
      }
    };
    onMounted(() => getHotIssueData());
    return {
      hotIssueList,
    };
  },
};
</script>

<style lang="scss" scoped>
.found {
  padding-top: 0;
  width: 100%;
  height: 100vh;
  .hot-issue {
    padding: 0.3rem;
    padding-top: 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(224, 224, 224, 0.7);
    // background-color: red;
    height: 20%;
    .title {
      height: 0.8rem;
      line-height: 0.8rem;
      p {
        font-size: 11px;
      }
    }
    .content {
      // overflow: hidden;
      height: calc(100% - 0.8rem);
      flex: 1;
    }
  }
}

.my-swipe {
  height: 100%;
  .van-swipe-item {
    width: 100%;
    height: 100%;
    margin: 0 0.05rem;
    .temp {
      width: 100%;
      height: 100%;
      background-size: cover;
      object-fit: cover;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .zzc {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      position: relative;
      .text {
        width: 100%;
        height: 100%;
        overflow: hidden;
        p {
          text-align: center;
          padding: 0 0.2rem;
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          color: #fff;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
</style>